<%--
  Created by IntelliJ IDEA.
  User: xiaoji
  Date: 2014/11/12
  Time: 9:22
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %>
<%@ taglib prefix="spring" uri="/WEB-INF/lib/spring.tld"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title><spring:message code='usercenter.index.title' /></title>
    <link href="${path}/style/acg/css/style.css" rel="stylesheet" type="text/css" />
    <script src="${path}/js/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        .service{
            background-color: #F0BE32;
            cursor:pointer
        }
    </style>
</head>
<body>
<jsp:include page="../public/header.jsp">
    <jsp:param    name="usercenter"    value="true"    />
</jsp:include>
<jsp:include page="../usercenter/leftMenu.jsp"></jsp:include>

<c:set value="${ fn:split(artistInfo['service'], ',') }" var="myservice" />
<c:set value="${ fn:split(artistInfo['skill'], ',') }" var="myskill" />
<div class="member_box">
    <div class="member_title">
        <spring:message code='usercenter.artistInfo.msg1' />
    </div>
    <div class="member_account">
        <div class="member_form">
            <ul>
                <!--艺术家技能-->
                <li class="clearfix">
                    <dl class="clearfix">
                        <dt><spring:message code='usercenter.artistInfo.msg8' /></dt>
                        <dd>
                            <div class="member_server_list">
                                <div class="member_server_left" id="firstSelectSkill">
                                    <c:forEach items="${skills}" var="s">
                                    <c:set var="boo" value="1"></c:set>
                                    <c:if test="${myskill !=null}">
                                        <c:forEach items="${myskill}" var="m">
                                            <c:if test="${s.id == m}">
                                                <c:set var="boo" value="0"></c:set>

                                            </c:if>
                                        </c:forEach>
                                        <c:if test="${boo == 1}">
                                            <a id="firstSkill${s.id}" href="javascript:void(0);" src="${s.id}" sid="${s.id}" sname="${s.name}" style="cursor:pointer" onclick="selectFirstSelect($(this))">${s.name}</a>
                                        </c:if>
                                    </c:if>
                                    </c:forEach>
                                </div>
                                <div class="member_server_center" id="addserviceSkill"></div>
                                <div class="member_server_right" id="secondSelectSkill">
                                    <c:forEach items="${skills}" var="s">
                                        <c:if test="${myskill !=null}">
                                            <c:forEach items="${myskill}" var="m">
                                                <c:if test="${s.id == m}">
                                                    <span id="secondSkill${s.id}" href="javascript:void(0);" sid="${s.id}" sname="${s.name}">${s.name}<em class="ico_del" onclick="deleteSecondSelectSkill(${s.id})">×</em></span>
                                                </c:if>
                                            </c:forEach>
                                        </c:if>
                                    </c:forEach>
                                </div>
                                <div class="clr"></div>
                            </div>
                        </dd>
                    </dl>
                </li>
                <!--艺术家服务-->
                <li class="clearfix">
                    <dl class="clearfix">
                        <dt><spring:message code='usercenter.artistInfo.msg2' /></dt>
                        <dd>
                            <div class="member_server_list">
                                <div class="member_server_left" id="firstSelect">
                                    <c:forEach items="${service}" var="s">
                                        <c:set var="boo" value="1"></c:set>
                                        <c:if test="${myservice !=null}">
                                            <c:forEach items="${myservice}" var="m">
                                                <c:if test="${s.id == m}">
                                                    <c:set var="boo" value="0"></c:set>

                                                </c:if>
                                            </c:forEach>
                                            <c:if test="${boo == 1}">
                                                <a id="first${s.id}" href="javascript:void(0);" src="${s.id}" sid="${s.id}" sname="${s.name}" style="cursor:pointer" onclick="selectFirstSelect($(this))">${s.name}</a>
                                            </c:if>
                                        </c:if>
                                    </c:forEach>
                                </div>
                                <div class="member_server_center" id="addservice"></div>
                                <div class="member_server_right" id="secondSelect">
                                    <c:forEach items="${service}" var="s">
                                        <c:if test="${myservice !=null}">
                                            <c:forEach items="${myservice}" var="m">
                                                <c:if test="${s.id == m}">
                                                    <span id="second${s.id}" href="javascript:void(0);" sid="${s.id}" sname="${s.name}">${s.name}<em class="ico_del" onclick="deleteSecondSelect(${s.id})">×</em></span>
                                                </c:if>
                                            </c:forEach>
                                        </c:if>
                                    </c:forEach>
                                </div>
                                <div class="clr"></div>
                            </div>
                        </dd>
                    </dl>
                </li>
                <li class="clearfix">
                    <dl class="clearfix">
                        <dt><spring:message code='usercenter.artistInfo.msg3' /></dt>
                        <dd>
                            <textarea id="intro_simplify" name="intro_simplify" class="sumarry650">${artistInfo.intro_simplify}</textarea>
                        </dd>
                    </dl>
                </li>
                <li class="clearfix">
                    <dl class="clearfix">
                        <dt><spring:message code='usercenter.artistInfo.msg4' /></dt>
                        <dd>
                            <textarea id="intro_complete" name="intro_complete" class="text650">${artistInfo.intro_complete}</textarea>
                        </dd>
                    </dl>
                </li>
                <li class="clearfix">
                    <dl class="clearfix">
                        <dt>&nbsp;</dt>
                        <dd><input type="button" id="save" value="<spring:message code='usercenter.artistInfo.msg5' />" class="btn60"></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript">
    function selectFirstSelect(obj){
        obj.toggleClass("service");
    }
    //服务删除
    function deleteSecondSelect(id){
        var obj = $("#second"+id);
        var htmlstr2 = '<a id="first'+obj.attr("sid")+'" ' +
                'href="javascript:void(0);" sid="'+obj.attr("sid")+'" ' +
                'sname="'+obj.attr("sname")+'" style="cursor:pointer" ' +
                ' onclick="selectFirstSelect($(this))">'+obj.attr("sname")+'</a>  ';
        obj.remove();
        $("#firstSelect").append(htmlstr2);
    }
    //技能删除
    function deleteSecondSelectSkill(id){
        var obj = $("#secondSkill"+id);
        var htmlstr2 = '<a id="firstSkill'+obj.attr("sid")+'" ' +
                'href="javascript:void(0);" sid="'+obj.attr("sid")+'" ' +
                'sname="'+obj.attr("sname")+'" style="cursor:pointer" ' +
                ' onclick="selectFirstSelect($(this))">'+obj.attr("sname")+'</a>  ';
        obj.remove();
        $("#firstSelectSkill").append(htmlstr2);
    }

    $(function(){
        //服务添加
        $("#addservice").click(function(){
            $("div#firstSelect a.service").each(function(){
                var htmlstr = '<span id="second'+$(this).attr("sid")+'" href="javascript:void(0);" sid="'+$(this).attr("sid")+'" sname="'+$(this).attr("sname")+'">'+$(this).attr("sname")+'<em class="ico_del" onclick="deleteSecondSelect('+$(this).attr("sid")+')">×</em></span>';
                $(this).remove();
                $("#secondSelect").append(htmlstr);
            });

        });
        //技能添加
        $("#addserviceSkill").click(function(){
            $("div#firstSelectSkill a.service").each(function(){
                var htmlstr = '<span id="secondSkill'+$(this).attr("sid")+'" href="javascript:void(0);" sid="'+$(this).attr("sid")+'" sname="'+$(this).attr("sname")+'">'+$(this).attr("sname")+'<em class="ico_del" onclick="deleteSecondSelectSkill('+$(this).attr("sid")+')">×</em></span>';
                $(this).remove();
                $("#secondSelectSkill").append(htmlstr);
            });

        });

        $("#save").click(function(){
            var service = "";
            var skill = "";
            var obj = $("div#secondSelect span");
            var obj2 = $("div#secondSelectSkill span");
            obj.each(function(i){
                if(i==obj.length-1) service += $(this).attr("sid");
                else service += $(this).attr("sid")+",";
            });
            obj2.each(function(i){
                if(i==obj2.length-1) skill += $(this).attr("sid");
                else skill += $(this).attr("sid")+",";
            });
            $.post("${path}/usercenter/updateUserArtist.html",{
                service:service,
                skill:skill,
                intro_simplify:$("#intro_simplify").val(),
                intro_complete:$("#intro_complete").val()
            },function(data){
                if(data.status == 1){
                    alert("添加成功");
                }else{
                    alert("添加失败");
                }
            },"json");
        });
    });
</script>
<jsp:include page="../usercenter/leftMenuEnd.jsp"></jsp:include>
<jsp:include page="../public/footer.jsp"></jsp:include>
</body>
</html>